<template>
	<div id="app">
		<h3>案例：折叠面板</h3>

		<!-- 4. 组件名当做标签使用 -->
		<!-- <组件名></组件名> -->
	</div>
</template>

<script>
	// 目标: 局部注册 (用的多)
	// 1. 创建组件 - 文件名.vue
	// 2. 引入组件
	export default {
		// 3. 局部 - 注册组件
		/*
		  语法: 
		  components: {
		    "组件名": 组件对象
		  }
		*/
	}
</script>

<style lang="less">
	body {
		background-color: #ccc;

		#app {
			width: 400px;
			margin: 20px auto;
			background-color: #fff;
			border: 4px solid blueviolet;
			border-radius: 1em;
			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
			padding: 1em 2em 2em;

			h3 {
				text-align: center;
			}

		}
	}
</style>
